<template>
    <div>
        <div class="tab" style="display: flex;margin-top: 30px;font-size: 14px;margin-left: 30px;margin-bottom: 40px;">
        <div class="tab" style="display: flex;align-items: center;margin-right: 50px;">
            <div>球队名称</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="phoneNumber" placeholder="请输入球队名称" @input="phoneNum"></el-input>
                <!-- <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button> -->
            </div>
        </div>
            <div style="display: flex;align-items: center">
                <div>赛事分类</div>
                <el-select style="margin: 0 10px ;" v-model="orderStatus" placeholder="选择" @change="handleChange">
                <el-option v-for="item in orderStatusList" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="game" label="赛事名称" align="center">
                
            </el-table-column>
            <el-table-column prop="url" label="信号源地址" align="center">
                
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.url==''">
                        <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">新增</el-button>
                    </div>
                    <div v-else>
                        <el-button size="small" type="danger" @click="handleButton1Click(scope.row)">修改</el-button>
                    </div>
                </template>
            </el-table-column>
            
        </el-table>

        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    </div>
</template>

<script>
import { consumeOrderList } from '../../../libs/api'
export default {
    data() {
        return {
            tableData: [{
                game:"葡萄牙vs法国",
                url:'http://'
            },{
                game:"葡萄牙vs法国",
                url:''
            }],
            orderData:'',
            orderType:'',
            phoneNumber:'',
            orderStatus:'',
            orderType:'',
            value1:'',
            orderStatusList:[{
                nickname:"足球",
                id:'1'
            },{
                nickname:"篮球",
                id:'2'
            }],
            allOodData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 10,
            pageSizes: [5, 10],
            alltabData: [],
            orderTime:''
        }
    },
    created() {
        // this.getOrderList()
    },
    methods:{
         // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getOrderList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getOrderList()
    },
        handleDateChange(value){
            console.log(value)
            this.orderTime = value[0]+"_"+value[1]
            const newDate1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate();
            const newDate2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate();
            console.log(newDate1+'-'+newDate2)
            this.orderTime = newDate1+'_'+newDate2
            this.getOrderList()
        },
        handleChangeType(value){

        },
        handleChange(value){

        },
        getOrderList(){
            consumeOrderList({
                page: this.currentPage,
                limit: this.PageSize,
                status:this.orderStatus,
                type:this.orderType,
                order_time:this.orderTime,
                mobile:this.phoneNumber
            }).then(res=>{
                console.log(res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
        orderNum(){
            this.getOrderList()
        },
        phoneNum(){
            this.getOrderList()
        },
        handleChange(){
            this.getOrderList()
        },
        handleChangeType(){
            this.getOrderList()
        }
    }
}
</script>
<style>

</style>